<template>
  <div style="display: flex;">
    <!-- 左边按钮区 -->
    <div style=" padding-left: 20px;padding-right: 20px;width: 27%;">
      <el-card style="min-height: 100%">
        <!-- 添加一个新的容器来控制按钮的垂直排列 -->
        <div style="display: flex; flex-direction: column; align-items: stretch; gap: 10px;"> <!-- gap 用于控制按钮间的间距 -->
          <el-upload
              style="display: block; width: 100%; text-align: center; margin-bottom: 10px;"
          class="avatar-uploader"
          name="multipartFile"
          action="http://localhost:8080/user/upload/avatar"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <el-button type="primary" style="width: 100%;">上传图片</el-button>
          </el-upload>
            <el-select  v-model="option"  placeholder="请选择转换的风格" style="height: 40%;width: 100%;margin-top: 50px">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>

          <el-button type="success" @click="toAnime" style="margin-top: 30px;width: 100%">风格转换</el-button>
          <el-button type="info" @click="clean" style="margin-top: 30px;width: 100%;margin-left: 0">清空</el-button>
        </div>
      </el-card>
    </div>

    <!-- 右边内容区 -->
    <div style="flex: 2; display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <!-- 图片区 -->
      <div
          style="width: 100%; min-height: 69vh; display: flex; justify-content: center; align-items: center; position: relative; background-color: #f2f5f9;">
        <span v-if="!originImage" style="color: #c5c5c5; cursor: default;">请上传人像图片</span>
        <el-image v-if="originImage" :src="originImage" fit="contain" style="width: 100%; height: 100%; position: absolute;"></el-image>
        <el-image v-if="animeImage" :src="'data:image/png;base64,'+animeImage" fit="contain" style="width: 100%; height: 100%; position: absolute;" :style="{ 'clip-path': `polygon(0 0, ${percent}% 0, ${percent}% 100%, 0 100%)` }"></el-image>
      </div>

      <el-card style="width: 100%; margin-top: 20px;">
        <!-- 滑块 -->
        <el-slider v-model="percent" style="width: 100%;" :show-tooltip="showTooltip" :format-tooltip="()=>'拖动试试'" @change="sliderChange"></el-slider>
      </el-card>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //原图
      originImage: '',
      //动漫化后的图片的base64编码
      animeImage: '',
      //滑块的百分比
      percent: 0,
      animationFrame: null,
      //是否显示滑块的提示
      showTooltip: true,
      option: '',
      options: [{
        value: 'cartoon',
        label: '卡通画风格'
      },
        {
          value: 'pencil',
          label: '铅笔风格'
        },
        {
          value: 'color_pencil',
          label: '彩色铅笔画风格'
        },
        {
          value: 'warm',
          label: '彩色糖块油画风格'
        },
        {
          value: 'wave',
          label: '神奈川冲浪里油画风格'
        },
        {
          value: 'lavender',
          label: '薰衣草油画风格'
        },
        {
          value: 'mononoke',
          label: '奇异油画风格'
        },
        {
          value: 'scream',
          label: '呐喊油画风格'
        },
        {
          value: 'gothic',
          label: '哥特油画风格'
        },
      ]
    }
  },
  methods: {
    //头像上传成功后操作
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.percent=0
        this.originImage = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    //拖动滑块触发的函数，拖动滑块后不再显示提示
    sliderChange() {
      if (this.showTooltip) {
        this.showTooltip = false
      }
    },
    //进行风格的转变
    toAnime() {
      this.percent=0
      this.$request.post('/ai/imageStyleTrans', {
          path: this.originImage,
          option: this.option
      }).then(res => {
        if (res.code === 200) {
          this.animeImage = res.data
          //得到风格转化图片后，滑块滑到右边的动画开始
          this.startTransition()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //将percent的值在0.5秒内从0增加到100
    animate() {
      const elapsed = Date.now() - this.startTime;
      const progress = Math.min(elapsed / 500, 1); // 限制在0到1之间
      this.percent = progress * 100;

      if (progress < 1) {
        // 如果还没有到达100%，则继续下一帧
        this.animationFrame = requestAnimationFrame(this.animate);
      } else {
        // 否则，清除动画帧
        cancelAnimationFrame(this.animationFrame);
        this.animationFrame = null;
      }
    },
    //启动animate动画
    startTransition() {
      if (this.animationFrame) return; // 如果已经开始了，就不要再开始了

      this.startTime = Date.now();
      this.animate(); // 开始动画
    },
    //清空
    clean() {
      this.originImage = ''
      this.animeImage = ''
      this.percent = 0
    },
  },
  beforeDestroy() {
    // 在组件销毁前清除动画帧
    if (this.animationFrame) {
      cancelAnimationFrame(this.animationFrame);
      this.animationFrame = null;
    }
  },
}
</script>

<style scoped>

</style>
